<template>
  <div class="comment-box" id="comment-anchor">
    <!--展开评论-->
    <div class="notification" @click="spreadComments"
      ><i
        :class="isShow ? 'fa fa-envelope-open-o' : 'fa fa-envelope'"
        aria-hidden="true"
      ></i
      >{{ isShow ? '折叠评论' : '展开评论' }} -
      <span class="noticom">{{ comments.commentDistCount }} 条评论 </span>
    </div>
    <!-- 标题 -->
    <transition
      enter-active-class="animate__animated animate__zoomIn"
      leave-active-class="animate__animated animate__fadeOut"
    >
      <div v-show="isShow">
        <h3 id="comments-list-title"
          >Comments |
          <span class="noticom"
            >{{ comments.commentDistCount }} 条评论
          </span></h3
        >
        <h3
          ><span class="notice notice-comment"
            >{{
              comments.commentDistCount <= 0
                ? '暂时没有评论哦,快到评论区说说吧~~~'
                : '下面就是精彩评论啦~~~'
            }}
          </span></h3
        >
        <ul>
          <li
            class="comment"
            v-for="(item, index) in comments.records"
            :key="index"
          >
            <!--回复头像-->
            <div class="pid-comment-user">
              <div class="pid-comment-user-info">
                <el-avatar
                  :src="item.user.avatar ? item.user.avatar : offLineProfile"
                >
                  <template #default>
                    <div class="image-slot">
                      <el-image
                        :src="
                          randomArrayIndex(store.state.defaultErrorImageUrl)
                        "
                        fit="cover"
                      ></el-image>
                    </div>
                  </template>
                </el-avatar>
                <div class="p-user">
                  <!-- isauthor-->
                  <span class="bb-comment">博主</span>
                  <span>{{ item.user.name }}</span>
                  <img
                    src="https://www.pandimension.site/wp-content/themes/Sakura/killua/images/level/level_6.svg"
                    style="height: 1.5em; max-height: 1.5em"
                  />
                </div>
                <div class="info user-info">
                  <span>发布于 {{ timeDifference(item.createTime) }}</span>
                  <span class="useragent-info"
                    >(<i
                      class="fa faa-wrench animated faa-slow"
                      :class="
                        item.clientServer
                          ? iconBrowserChoice(item.clientServer)
                          : 'fa-internet-explorer'
                      "
                      aria-hidden="true"
                    ></i>
                    &nbsp;{{ item.clientServer }}&nbsp;&nbsp;
                    <i
                      class="fa faa-tada animated faa-slow"
                      :class="
                        item.clientEquipment
                          ? iconDeviceChoice(item.clientEquipment)
                          : 'fa-windows'
                      "
                      aria-hidden="true"
                    ></i
                    >&nbsp;{{ item.clientEquipment }} )</span
                  >
                  <span>&nbsp;来自 : &nbsp;{{ item.address }}&nbsp;</span>
                </div>
              </div>
            </div>
            <!-- 父评论-->
            <div class="user-context">
              <div class="comment-reply-link" @click="PidReply($event, item)"
                >回复</div
              >
              <div class="context">
                <MdEditor
                  :mdProps="{
                    context: item.context,
                    previewOnly: true
                  }"
                >
                </MdEditor>
              </div>
              <transition
                enter-active-class="animate__animated animate__zoomIn"
                leave-active-class="animate__animated animate__fadeOutDown"
              >
                <div
                  class="pid-comment-box"
                  v-show="
                    item.isShowPidCommentForm
                      ? item.isShowPidCommentForm
                      : item.isShowPidCommentForm
                  "
                >
                  <el-form :model="commentsForm">
                    <div class="comment-textarea">
                      <el-form-item class="pid-comment-reply">
                        <el-input
                          class="textarea"
                          v-model="commentsForm.comment"
                          clearable
                          :autosize="{
                            minRows: 3,
                            maxRows: 5
                          }"
                          type="textarea"
                          :placeholder="`回复@${commentsForm.name}`"
                        >
                        </el-input>
                      </el-form-item>
                      <label class="input-label">回复区 ...</label>
                      <CommentInput
                        @PidReply="PidReply($event, item)"
                        :commentsData="{ commentsForm, item }"
                      ></CommentInput>
                    </div>
                  </el-form>
                </div>
              </transition>
            </div>
            <!--子评论-->
            <template v-if="item.children">
              <SubComments :subComments="item"></SubComments>
            </template>
            <hr />
          </li>
        </ul>
        <!--分页-->
        <div class="page-box">
          <el-pagination
            :hide-on-single-page="true"
            class="page-tion"
            :currentPage="commentPageInfo.current"
            :total="commentPageInfo.total"
            layout="total,sizes ,prev, pager, next,jumper"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="commentPageInfo.size"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
  import { timeDifference } from '@/utils/time.js'

  import { randomArrayIndex } from '@/utils/randomArrayElemt'
  import { useStore } from 'vuex'
  import SubComments from '@/views/blog/components/SubComments'
  import CommentInput from '@/views/blog/components/CommentInput'
  import MdEditor from '@/components/markdown/MdEditor'
  import { provide, reactive, ref } from 'vue'
  import offLineProfile from '@/assets/images/offLine.jpg'
  import { iconBrowserChoice, iconDeviceChoice } from '@/utils/webutils'

  const store = new useStore()

  defineProps({
    comments: {
      type: Object
    }
  })

  const isShowPidCommentForm = ref(false)

  const commentPageInfo = reactive({
    size: 10,
    current: 1,
    total: 1
  })

  const isShow = ref(false)

  /**
   * 展示评论
   */
  const spreadComments = () => {
    isShow.value = !isShow.value
  }

  /**
   * 回复按钮
   * @param e
   * @param item
   * @constructor
   */
  const PidReply = (e, item) => {
    store.commit('IS_SHOW_ARTICLE_COMMENT', isShowPidCommentForm.value)
    item.isShowPidCommentForm = !item.isShowPidCommentForm
    commentsForm.name = item.user.name
    isShowPidCommentForm.value = !isShowPidCommentForm.value
  }

  /**
   * 评论表单
   * @type {UnwrapNestedRefs<{name: string, comment: string, id: string}>}
   */
  const commentsForm = reactive({
    id: '',
    comment: '',
    name: ''
  })

  const handleSizeChange = (size, current = commentPageInfo.current) => {
    commentPageInfo.size = size
    emits('getCommentsDetails', undefined, size, current)
  }

  const handleCurrentChange = (current, size = commentPageInfo.size) => {
    emits('getCommentsDetails', undefined, size, current)
  }

  /**
   * 刷新评论
   */
  const refreshComments = () => {
    emits(
      'getCommentsDetails',
      undefined,
      commentPageInfo.size,
      commentPageInfo.current
    )
  }

  provide('refreshComments', refreshComments)

  const emits = defineEmits(['getCommentsDetails'])

  defineExpose({
    commentPageInfo
  })
</script>

<style lang="less">
  .comment-box {
    overflow: hidden;

    .page-box {
      display: flex;
      justify-content: center;
      margin-bottom: 30px;
      .el-pager li {
        background: var(--tab-botton-bg);
      }
      //.el-pagination .btn-next, .el-pagination .btn-prev {
      //  background: var(--tab-botton-bg);
      //  //color: var(--text-bright);
      //}
      .page-tion {
        //position: relative;
        //left: 45%;
      }

      .el-input__suffix {
        z-index: -5;
      }
    }
  }

  .textarea {
    textarea {
      background-image: url(https://view.moezx.cc/images/2018/03/24/comment-bg.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: right;
      resize: vertical;
    }
  }
  .useragent-info {
    i {
      color: rgba(189, 35, 235, 0.92);
      font-size: 15px;
      padding-left: 2px;
    }
    i:nth-child(2) {
      color: rgba(0, 68, 225, 0.86);
    }
  }

  .comment-box {
    .notification:hover {
      cursor: pointer;
    }

    .user-context,
    .user-sub-context {
      .context {
        font-weight: 600;
        font-size: 14px;
        padding: 10px 0 10px 50px;

        img {
          width: 100%;
          height: 150px;
          margin: 15px 5px 5px 0;
          border-radius: 20px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
      }
    }

    .pid-comment-user,
    .sub-comment-user {
      display: flex;
      align-items: center;

      .pid-comment-user-info,
      .sub-comment-user-info {
        display: flex;
        justify-content: left;
        align-items: center;

        .reply-user {
          color: red;

          span {
            font-weight: 600;
          }
        }

        .p-user {
          color: var(--font-color);
          span,
          img {
            margin-right: 5px;
            font-size: 15px;
            font-weight: 600;
            display: initial;
          }

          .bb-comment {
            margin-left: 10px;
          }
        }

        .reply-label {
          color: var(--font-color);
        }

        .user-info {
          font-size: 12px !important;
          color: #a6a6a6;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis !important;

          img {
            display: inline;
          }
        }
      }
    }

    .user-sub-context {
      padding-left: 20px;
    }
  }

  .sub-comment-user-info {
    padding-left: 20px;
  }

  .reply-icon {
    position: relative;
    right: 23px;
    top: 18px;
    color: purple;
    transform: rotateX(180deg);
  }

  @media (max-width: 860px) {
    //点赞收藏
    .three_consecutive_operations {
      display: none !important;
    }

    .notice-comment {
      margin: 0 !important;
    }

    .comment-box {
      .comment {
        .pid-comment-user span {
          font-size: 12px !important;
        }

        .user-context {
          .context {
            padding: 10px 0 10px 5px;
          }
        }

        .sub-box {
          .sub-comment-user-info {
            padding: 0;

            .p-user {
              .bb-comment {
                display: none;
              }

              img {
                display: none;
              }
            }

            .user-info {
              display: none;
            }

            .reply-user {
              .reply-label {
                margin-right: 0;
              }
            }
          }

          .user-sub-context {
            position: relative;

            .context {
              padding: 10px 0 10px 0px;
            }
          }
        }
      }

      .comment-box img {
        width: 50px;
        height: 50px;
      }

      .el-avatar {
        display: none;
      }
    }

    // 分页
    .page-box {
      .page-tion {
        span {
          display: none;
        }
      }
    }
  }

  .pid-comment-reply {
    .el-textarea__inner {
      padding: 15px 0 0 20px;
      //background: var(--tab-botton-bg);
    }
  }

  .comment {
    p {
      font-size: 14px !important;
    }

    h1 {
      font-size: 1.2em;
    }

    h2 {
      font-size: 1.1em;
    }

    h3 {
      font-size: 1em;
    }

    h4,
    h5,
    h6 {
      font-size: 0.8em;
    }
  }
</style>
